<template>
	<view class="wrapper" @click="toDetail">
		<view class="w-left">
			<image :src="info.thumb" mode="aspectFill" lazy-load class="goods-img"></image>
		</view>
		<view class="w-right">
			<view class="name text-cut-2">{{info.name}}</view>
			<view class="address flex align-center">
				<view class="left flex align-center" style="overflow: hidden;">
					<image src="https://localelife.chunchuangkeji.cn/h5img/images/addr-2.png" class="icon flex-shrink"></image>
					<text class="addr text-cut">{{info.store_name}}</text>
				</view>
				<view class="right">{{info.juli}}</view>
			</view>
			<!-- <view class="number flex">
				<view class="flex align-center item">
					<image src="https://localelife.chunchuangkeji.cn/h5img/images/see.png" class="icon"></image>
					<text class="num">60</text>
				</view>
				<view class="flex align-center item">
					<image src="https://localelife.chunchuangkeji.cn/h5img/images/003.png" class="icon"></image>
					<text class="num">60</text>
				</view>
			</view> -->
			<view class="bottom flex justify-between" style="margin-top: 28rpx;">
				<view class="left flex">
					<text class="text-price">{{info.shop_price}}</text>
					<text class="text-through">¥{{info.market_price}}</text>
				</view>
				<view class="right flex" v-if="info.stock">
					<view style="width: 88rpx;" class="flex justify-center">
						<view class="flex flex-direction align-center justify-center" style="width: 100%;">
							<view class="fan font-20" style="color: #B16E05;">分享返</view>
							<view class="flex align-center margin-top-4">
								<text class="margin-right-4 font-22" style="color: #FF6F27;">{{Number(info.share_award_money) || 0}}</text>
								<image src="https://localelife.chunchuangkeji.cn/h5img/images/011.png" class="icon fu-block-24"></image>
							</view>
						</view>
					</view>
					<view class="flex-sub flex align-center justify-center font-24 text-white">立即购买</view>
				</view>
				<view class="text-666 fu-fs24" v-else>已抢光</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		info: {
			type: Object,
			default() {
				return {}
			}
		},
		showBtn: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			
		}
	},
	methods: {
		toDetail() {
			this.$emit('onClick')
			this.$urouter.navigateTo({
			  url: '/pages/goods/goodsdetail/goods-detail/index',
			  params: {
			    sku_id: this.info.sku_id || 0,
			    goods_id: this.info.id || 221,
				pageType: 'superBuy'
			  }
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.wrapper {
	padding: 32rpx 0;
	border-bottom: 1rpx solid #eee;
	display: flex;
	background-color: #fff;
	.w-left {
		flex-shrink: 0;
		.goods-img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx;
		}
	}
	.w-right {
		margin-left: 24rpx;
		flex: 1;
		overflow: hidden;
		.name {
			font-size: 28rpx;
			font-weight: bold;
		}
		.address {
			margin-top: 16rpx;
			.left {
				flex: 1;
				.icon {
					flex-shrink: 0;
					width: 24rpx;
					height: 24rpx;
					margin-right: 16rpx;
				}
				.addr {
					font-size: 22rpx;
					color: #999;
				}
			}
			.right {
				font-size: 20rpx;
				color: #999;
				flex-shrink: 0;
			}
		}
		.number {
			margin-top: 8rpx;
			.item {
				margin-right: 64rpx;
				font-size: 22rpx;
				color: #999;
				.icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 24rpx;
				}
			}
		}
		.bottom {
			align-items: flex-end;
			.left {
				align-items: baseline;
			}
			.text-price {
				color: #FF5C5C;
				font-size: 32rpx;
				font-weight: bold;
			}
			.text-through {
				font-size: 20rpx;
				color: #999;
				margin-left: 16rpx;
			}
			.right {
				width: 210rpx;
				height: 64rpx;
				background: url(https://localelife.chunchuangkeji.cn/h5img/images/bg-6.png) no-repeat center / cover;
			}
		}
	}
}
</style>
